<template>
    <div :class="packUp_overhaul ? 'table2 table' : 'table'">
        <div class="btn">
            <div class="btn_item" @click="pushAdd">
                <img class="btn_icon" src="@/assets/images/images_new/add_icon.png" alt="">
                <span>新增</span>
            </div>
            <div class="btn_item" @click="pushReceivingRules">
                <img class="btn_icon" src="@/assets/images/qianzishan/receivingRules.png" alt="">
                <span>接收规则</span>
            </div>
            <div class="btn_item" @click="pushTicketType">
                <img class="btn_icon" src="@/assets/images/qianzishan/ticketType.png" alt="">
                <span>工单类型</span>
            </div>
            <div class="btn_item" @click="showRule">
                <img class="btn_icon" src="@/assets/images/qianzishan/TransferRules.png" alt="">
                <span>转派规则</span>
            </div>
            <div class="btn_item" @click="delItem">
                <img class="btn_icon" src="@/assets/images/images_new/export_icon.png" alt="">
                <span>导出</span>
            </div>
        </div>
        <div class="tableBg">
            <el-table ref="tableRef" :data="tableData.list" style="width: 100%;" stripe
                @selection-change="handleSelectionChange" empty-text="暂无数据" :max-height="table_height"
                :scrollbar-always-on="true">
                <el-table-column property="name" label="工单编号" :min-width="flexWidth('name', tableData.list, '规则名称')" />
                <el-table-column property="alarmLevelName" label="类型"
                    :min-width="flexWidth('alarmLevelName', tableData.list, '规则名称')" />
                <el-table-column property="alarmTypeName" label="工单来源" :min-width="flexWidth('alarmTypeName', tableData.list, '工单来源')" />
                <el-table-column property="alarmTypeName" label="所属系统" :min-width="flexWidth('alarmTypeName', tableData.list, '所属系统')" />
                <el-table-column property="alarmTypeName" label="专业" :min-width="flexWidth('alarmTypeName', tableData.list, '专业')" />
                <el-table-column property="alarmTypeName" label="内容描述" :min-width="flexWidth('alarmTypeName', tableData.list, '内容描述')" />
                <el-table-column property="alarmTypeName" label="创建人" :min-width="flexWidth('alarmTypeName', tableData.list, '创建人')" />
                <el-table-column property="alarmTypeName" label="报修/报事人" :min-width="flexWidth('alarmTypeName', tableData.list, '报修/报事人',2)" />
                <el-table-column property="alarmTypeName" label="创建时间" :min-width="flexWidth('alarmTypeName', tableData.list, '创建时间')" />
                <el-table-column property="alarmTypeName" label="是否收费" :min-width="flexWidth('alarmTypeName', tableData.list, '是否收费')" />
                <el-table-column property="alarmTypeName" label="处理时间" :min-width="flexWidth('alarmTypeName', tableData.list, '处理时间')" />
                <el-table-column property="alarmTypeName" label="处理时间" :min-width="flexWidth('alarmTypeName', tableData.list, '处理时间')" />
                <el-table-column label="操作" width="75px" class-name="fixed_column" fixed="right">
                    <template #default="scope: any">
                        <div class="btn_ative" title="查看" @click="viewDetails(scope.row)" v-if="scope.row.status==1">
                            <img class="operation_btn" src="../../../../assets/images/images_new/details_icon.png"
                                alt="">
                        </div>
                        <div class="btn_ative" title="验收" @click="viewDetails(scope.row)" v-if="scope.row.status==2">
                            <img class="operation_btn" src="../../../../assets/images/qianzishan/acceptance_check.png"
                                alt="">
                        </div>
                        <div class="btn_ative" title="分配" @click="viewDetails(scope.row)" v-if="scope.row.status==3">
                            <img class="operation_btn" src="../../../../assets/images/qianzishan/distribution.png"
                                alt="">
                        </div>
                        <div class="btn_ative" title="审核" @click="viewDetails(scope.row)" v-if="scope.row.status==4">
                            <img class="operation_btn" src="../../../../assets/images/qianzishan/examine.png"
                                alt="">
                        </div>
                        <div class="btn_ative" title="转交" @click="viewDetails(scope.row)" v-if="scope.row.status==5">
                            <img class="operation_btn" src="../../../../assets/images/qianzishan/hand_over_to.png"
                                alt="">
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { isButtonDisabled, flexWidth } from '@/utils/utils'
import { useMain, store } from "@/store/index";
import { storeToRefs } from 'pinia';
import router from '@/routes';
const props = defineProps({
    searchData: {
        type: Object,
        default: {}
    }
})

const useMainStore = useMain(store);//pinia
//storeToRefs 保持响应式 packUp_overhaul 搜索栏是否收起
let { packUp_overhaul } = storeToRefs(useMainStore);

interface Ilist {
    id: string;
    projectId: string;
    name: string;
    alarmLevelId: string;
    alarmLevelName: string;
    alarmTypeId: string;
    alarmTypeName: string;
    triggerSourceType: number;
    triggerCondition?: string;
    triggerConditionName?: string;
    filterType: number;
    filterFrequency: number;
    ilterCycle: number;
    filterFocusTime?: string;
    state: number;
    content: string;
    remark?: string;
    createTime: string;
    createBy: string;
    updateTime: string;
    updateBy: string;
    alarmRuleDeviceRsps?: any[];
    alarmRuleConditionRsps?: any[];
}
const tableData = reactive({
    // list: [] as Array<Ilist>
    list: [
        { name: '111', status: 1 },
        { name: '111', status: 2 },
        { name: '111', status: 3 },
        { name: '111', status: 4 },
        { name: '111', status: 5 },
        { name: '111', status: 1 },
        { name: '111', status: 1 },
    ]
})
//选中的行
const multipleSelection = reactive({
    list: [] as Array<string>
})

//多选项改变时
const handleSelectionChange = (val: Ilist[]) => {
    let list = [] as Array<string>;
    if (val) {
        val.forEach((item) => {
            list.push(item.id);
        })
    }
    multipleSelection.list = list;
}


const emit = defineEmits(['showAdd', 'showViewDialog', 'getTotal', 'updateList', 'showRule']);

//查看详情
const viewDetails = (row: Ilist) => {
    emit('showViewDialog', row.id);
}


//跳转新增页面
const pushAdd = () => {
    emit('showAdd');
}

//接收规则
const pushReceivingRules = ()=>{
    router.push('/integratedServices/receivingRules');
}

//工单类型
const pushTicketType = ()=>{
    router.push('/integratedServices/ticketType');
}

let tableRef = ref<any>(null);//获取表格组件

const getList = () => {
    
}
// getList();

//删除规则
const delItem = () => {
    if (!multipleSelection.list || multipleSelection.list.length == 0) {
        return;
    }
    //@ts-ignore 取消单行ts验证
    ElMessageBox.confirm(
        '确定删除吗?',
        '删除确认',
        {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'none',
            showClose: false
        }
    )
        .then(() => {


        })
        .catch(() => {

        })
}

const state = reactive({
    per: {} as any,
})

state.per['queryAlarmRuleDetail'] = isButtonDisabled('/msg/alarmRule/queryAlarmRuleDetail')
state.per['editAlarmRule'] = isButtonDisabled('/msg/alarmRule/editAlarmRule')

//打开转派规则弹窗
const showRule = () => {
    emit('showRule');
}

let table_height = ref(0);

//获取表格最大高度 table_height
const getTabHeight = () => {
    let page = document.getElementById('overhaul');
    if (page) {
        let pageHeight = page!.offsetHeight;
        let searchBar = document.getElementById('overhaul_searchBar');
        let searchBarHeight = searchBar!.offsetHeight;
        table_height.value = pageHeight - searchBarHeight - 150;
    }


}

//监听搜索栏展开收起,重新计算表格高度
watch(() => packUp_overhaul.value, (newValue, oldValue) => {
    setTimeout(() => {
        nextTick(() => {
            getTabHeight();
        })
    }, 200);

});


onMounted(() => {
    getTabHeight()
    window.addEventListener("resize", getTabHeight);//监听屏幕变化,重新计算表格高度
})

onBeforeUnmount(() => {
    window.removeEventListener("resize", getTabHeight); // 销毁绑定方法
})



const filterTypeText = (filterType: number) => {

    let text = "";
    switch (filterType) {
        case 1:
            text = '不过滤';
            break;
        case 2:
            text = '周期性报警';
            break;
        case 3:
            text = '持续报警仅报警一次';
            break;
        case 4:
            text = '每天同类型报警仅设定一次统一报警';
            break;
        default:
            text = '';
    }

    return text;
}

defineExpose({ getList });
</script>

<style scoped lang="scss">
.table {
    height: calc(100% - 203px);
    transition: all 0.2s linear;

    &.table2 {
        height: calc(100% - 146px);
    }

    .tableBg {
        background-color: #fff;
        border-radius: 8px;
        height: calc(100% - 40px);
        overflow: hidden;
    }

    .checkbox_img {
        cursor: pointer;
    }

    .btn {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 40px;
        padding-right: 25px;
        color: rgb(112, 105, 95);
        font-size: 14px;

        .btn_item {
            display: flex;
            align-items: center;
            margin-left: 20px;
            cursor: pointer;
            height: 28px;
            line-height: 28px;
            padding: 0 10px 0 8px;

            &:hover {
                background: rgba(0, 0, 0, 0.1);
                border-radius: 2px;
            }

            .btn_icon {
                width: 18px;
                margin-right: 6px;
            }
        }
    }

    // .w50 {
    //     width: 58px;
    //     height: 24px;
    // }
    .btn_ative {
        width: 35px;
        height: 35px;
        line-height: 35px;
        cursor: pointer;
        display: inline-block;
        margin-right: 10px;
        text-align: center;
        margin-top: 7.5px;
        padding-top: 5px;

        &:last-child {
            margin-right: 0;
        }

        &:hover {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 2px;
        }

        .operation_btn {
            height: 20px;

        }
    }

}
</style>
